<template>
  <div ref="chartRef" style="height: 400px; width: 100%;"></div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  legendData: {
    type: Array,
    required: true,
  },
  seriesDataList: {
    type: Array,
    required: true,
  },
  xAxisData: {
    type: Array,
    required: true,
  },
});

const chartRef = ref<any>(null);

const drawChart = () => {
  const myChart = echarts.init(chartRef.value);
  const series = props.legendData.map((name, index) => ({
    name,
    type: 'line',
    smooth: true,
    data: props.seriesDataList[index] || [],
    symbolSize: 1,
  }));

  const options = {
    title: { text: props.title },
    tooltip: { trigger: 'axis' },
    legend: { data: props.legendData },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.xAxisData || [],
    },
    yAxis: { type: 'value' },
    series: series,
    dataZoom: [
      {
        type: 'slider',
        start: 0,
        end: 100,
      },
      {
        type: 'inside',
      },
    ],
  };

  myChart.setOption(options);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

onMounted(() => {
  drawChart();
});

watch([() => props.seriesDataList, () => props.xAxisData], drawChart);
</script>

<style scoped>
/* 可以添加样式来美化图表组件 */
</style>
